/*
 *@description:
 * @author wayne
 * @date 2023-09-07 14:39
 */
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import "./index.module.less";
import { useState, useEffect, useRef } from "react";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig, Boot } from "@wangeditor/editor";
import { store } from "@/store";
import { message } from "antd";
import { isDevFn } from "@/utils/getEnv";
import { useSelector } from "@/store/hooks";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import { insertTitle } from "./menus/title";
import { insertText } from "./menus/text";
import { pictureText } from "./menus/picture";

Boot.registerMenu({
	key: "customTitle",
	factory() {
		return new insertTitle();
	}
});
Boot.registerMenu({
	key: "customText",
	factory() {
		return new insertText();
	}
});
Boot.registerMenu({
	key: "pictureText",
	factory() {
		return new pictureText();
	}
});
function MyEditor(props: any) {
	const isMountRef = useRef(false);
	// editor 实例
	const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
	// const [editor, setEditor] = useState(null)                   // JS 语法

	// 编辑器内容
	const [html, setHtml] = useState("");

	// 工具栏配置
	const toolbarConfig: Partial<IToolbarConfig> = {
		excludeKeys: ["uploadVideo"],
		insertKeys: {
			index: 10,
			keys: props.isNeedMenu ? ["customTitle", "customText", "pictureText"] : []
		}
	}; // TS 语法

	const isDev = isDevFn(import.meta.env.MODE);
	const token = useSelector(state => state.global.token);

	// 编辑器配置
	const editorConfig: Partial<IEditorConfig> = {
		placeholder: props.placeholder ?? "请输入内容",
		autoFocus: false,
		MENU_CONF: {
			uploadImage: {
				server: `${isDev ? "" : import.meta.env.VITE_API_URL}/api/upload/qiniu`,
				fieldName: "file",
				maxFileSize: 100 * 1024 * 1024, // 100M
				headers: {
					token
				},
				customInsert(res: any, insertFn: any) {
					// TS 语法
					if (res.code === RESULT_CODES.SUCCESS) {
						const url = res?.data;
						const alt = res.data;
						const href = res?.data;
						insertFn(url, alt, href);
					} else {
						message.error("上传失败！");
					}
				}
			},
			fontFamily: {
				fontFamilyList: [
					{ name: "黑体", value: "STHeitiTC-Medium" },
					{ name: "简宋", value: "SimSong-Bold" },
					{ name: "Arial", value: "Arial" },
					"微软雅黑",
					{ name: "大标宋", value: "song" },
					{ name: "华文黑体", value: "STHeiti" },
					{ name: "华文楷体", value: "STKaiti" },
					{ name: "苹方", value: "PingFang SC" }
				]
			}
			// uploadVideo: false
		}
	};

	useEffect(() => {
		setHtml(props.value);
	}, [props.value]);

	// 及时销毁 editor ，重要！
	useEffect(() => {
		return () => {
			if (editor == null) return;
			editor.destroy();
			setEditor(null);
		};
	}, [editor]);

	const handleChange = editorInfo => {
		const str = editorInfo.getHtml();
		setHtml(str);
		const defaultValue = "<p><br></p>";
		if (!isMountRef.current) {
			isMountRef.current = true;
			return;
		}
		isMountRef.current && props.onChange(str == defaultValue ? undefined : str);
	};

	return (
		<>
			<div style={{ border: "1px solid #ccc", zIndex: 100 }}>
				<Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" style={{ borderBottom: "1px solid #ccc" }} />
				<Editor
					defaultConfig={editorConfig}
					value={html}
					onCreated={setEditor}
					onChange={handleChange}
					mode="default"
					style={{ height: "500px", overflowY: "hidden" }}
				/>
			</div>
		</>
	);
}

export default MyEditor;
